<template>
    <div class="container">
        <my-header></my-header>
        <el-main>
            <el-card class="main-card" shadow="never">
                <!-- 面包屑 -->
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{$route.query.sectionName}}</el-breadcrumb-item>
                    <el-breadcrumb-item>帖子详情</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 帖子标题 -->
                <div class="title">{{postData.title}}</div>
                <!-- 分割线 -->
                <el-divider content-position="left">{{postData.author}} 发表于 {{postData.time}}</el-divider>
                <!-- 帖子正文 -->
                <div class="content markdown-body" v-html="postData.content"></div>
                <!-- 回帖列表 -->
                <comment-box v-for="item in  postData.comments" :key="item.layerNum" :item="item" class="comment-box"></comment-box>
                <!-- 分页 -->
                <!-- 分页 -->
                <el-pagination
                    class="pagination"
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </el-card>
            <!-- 回复 -->
            <el-card class="main-card post-comment-card" shadow="never">
                <el-alert
                    title="您还未登录，暂时不能回帖，请于登录后回帖！"
                    type="error"
                    show-icon
                    v-if="!isLogin"
                    class="not-login-alert">
                </el-alert>
                <el-link type="primary" @click="hanldeToMarkdownClick">使用Markdown编辑器回帖，支持代码高亮，点击体验>>></el-link>
                <el-input
                    class="post-comment"
                    type="textarea"
                    :rows="4"
                    placeholder="有什么想说的，在此回个帖吧`"
                    v-model="postContent"
                    :disabled="!isLogin">
                </el-input>
                <div class="button-container">
                    <el-button type="primary" round @click="handleCommit">回帖</el-button>
                    <el-button type="warning" round @click="handleClear">清空</el-button>
                </div>
            </el-card>
        </el-main>
    </div>
</template>
<script>
import MyHeader from "../../components/MyHeader"
import CommentBox from "../Detail/components/CommentBox"
import axios from 'axios'
import getUrl from "../../assets/js/getPath"
import qs from 'qs'
import 'github-markdown-css/github-markdown.css'

export default {
    name:'Detail',
    components:{
        MyHeader:MyHeader,
        CommentBox:CommentBox
    },
    data(){
        return{
            postData:{
                'title':'',
                'author':'',
                'time':'',
                'content':'',
                'comments':[]
            },
            postContent:'',
            postID:this.$route.query.id,
            total:50,
            pageSize:10,
            currentPage:1


        }
    },
    mounted(){
        // 获取帖子及回帖数据
        this.getPostData();
        //this.printLoginStatus();
    },
    computed:{
        length:function(){
            return this.postData.comments.length;
        },
        isLogin:function(){
            if(this.$store.state.isLogin === '未登录'){
                return false;
            }else{
                return true;
            }
        }
    },
    watch:{
        // 每当页码发生改变，重新请求数据
        currentPage:function(){
            this.getPostData();
        }
    },
    methods:{
        handleCurrentChange:function(currentPage){
            //console.log(currentPage);
            this.currentPage = currentPage;
        },
        printLoginStatus:function(){
            console.log(this.$store.state.isLogin);
        },
        getPostData:async function(){
            let url = getUrl('detail');
            const params = {
                'postID':this.$route.query.id,
                'page':this.currentPage
            }
            //console.log(params);
            try{
                const {data:res} = await axios.get(url,{params:params});
                if(res.meta.status !== 200){
                    return this.$message.error(res.meta.msg);
                }else{
                    this.$data.postData = res.data;
                    this.$data.total = res.data.total;
                    this.$data.pageSize = res.data.perpage;
                    // this.$message.success("请求成功");
                }
            }catch(e){
                this.$message.error("请求出错");
            }
        },
        handleClear:function(){
            this.postContent = '';
        },
        handleCommit:async function(){
            let url = getUrl('comment');

            let data = {
                'content':this.postContent,
                'postID':this.postID
            }
            data = qs.stringify(data);
            try{
                const {data:res} = await axios.post(url,data,{ 'Content-Type':'application/x-www-form-urlencoded'});
                if(res.meta.status !== 200){
                    return this.$message.error(res.meta.msg);
                }else{
                    if(res.data.res === 0){
                        this.$message.success("回帖成功！");
                        this.getPostData();
                    }else{
                        this.$message.error("您回复的内容中含有违法违规及不符合本论坛版规的内容，请检查后重新操作！");
                    }
                }
            }catch(e){
                this.$message.error("请求出错");
            }
            //this.postData.comments.push(data);
        },
        hanldeToMarkdownClick:function(){
            this.$router.push({name:'Post',params:{'id':this.postID,'action':'comment','postTitle':this.postData.title}});
            // this.$router.push('/post?id='+this.postID+'&action=comment');
        }
    }
}
</script>
<style lang="scss" scoped>

html,body{
    width:100%;
    height: 100%;
}
.container{
    width: 100%;
    background-color: #eee;
}
.main-card{
    width:80%;
    margin: 0 auto;
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
}
.title{
    margin:20px 0px 20px 0px;
    font-size: 30px;
    font-weight: bold;
}
.content{
    margin-top:30px;
    padding:40px;
    font-size: 18px;
    background-color: #eee;
}
.post-comment-card{
    margin-top:30px;
    .not-login-alert{
        margin-bottom:20px;
    }
    .post-comment{
        margin-top:10px;
        border-radius: 30px;
    }
    .button-container{
        margin-top:20px;
    }
}
.pagination{
    margin-top:20px;
}
</style>